<script>
  let username = '';
  let password = '';
  let response='';
  let checkone=true;

  import { sharedParam,shareName} from "./stores/userStore"

let login=(e)=>{
console.log("点击了登录事件！");
 fetch('/api/login',{
  method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ username, password }),
})
.then((response) => response.text())
.then((data)=>{
if(data == "admin"){
    sharedParam.set(true)
    shareName.set(username)
    location.href = '/admin';
}else if(data == "student"){
 sharedParam.set(true)
 shareName.set(username)
 localStorage.setItem("username",username);
 location.href = '/admin/student';
 }
})
.catch((err)=>{
  response = err ;
});
if(response!=''){
  alert(response)
}

}



</script>

<style>


  .welcome-text {
    /* font-family: 'Comic Sans MS', cursive;
    font-size: 30px;
    color: red;
    margin-bottom: 20px; */
         font-weight: bold; /* 设置字体为粗体 */
font-size: 24px; /* 设置字体大小 */
color: #ff0000; /* 设置字体颜色为红色 */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 设置文本阴影 */
align-items: center;
  }

  .login-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px;
    margin: 0 auto;
  }

  .login-form input {
    margin-bottom: 10px;
    padding: 5px;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: black;
  }

  .login-form button {
    padding: 10px 20px;
    background-color: #2c27b0;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  .login-form button:hover {
    background-color: #45a049;
  }
  main {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

   :global(body) {
  background-image: url(../lib/images/girl.png);
  background-size: cover; 
  background-repeat: no-repeat;  
  background-position: center; 
}

.mybutton {
  position: absolute;
    flex-shrink: 0;  
    margin: 0 10px;  
    padding: 10px 20px;  
    background-color: #38a1db;
    color: #ffffff;
    border: 1px solid #38a1db;
    cursor: pointer;
    transition: .4s;
    left:40%;
    top:75%;
  }

.弹窗{
    display:flex;
    align-items: center;
    flex-direction: column;
    box-sizing: border-box;
    width:30%;
    height: 350px;
    background: rgba(173, 216, 230, 0.1);
    position: absolute;
    padding: 40px 40px;
    left:35%;
    top:30%;
    border-radius: 10px;
    border: none;
  }
  
</style>
<main class="弹窗">
 <div class="login-form">
  <h1 class="welcome-text">欢迎来到选课管理系统</h1>
      <form >
          <input type="text" placeholder="用户名" bind:value={username} required />
          <input type="text" placeholder="密码" bind:value={password} required />
          <button class="mybutton" on:click={login}>登录</button>
      </form>
  </div>
</main>